import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import type { RulerContentState, MousePosition } from '../types/prevViewTypes';

import { setMousePositions } from '../store/useMousePosition';

type Props = {
  isShow: boolean;
  type: string;
};

const RulerReferenceLine: React.FC<Props> = ({ isShow = true, type }) => {
  const mousePositions: MousePosition[] = useSelector((state: RulerContentState) => state.mousePositions) || [];

  return (
    <div
      className="lines"
      style={{
        display: isShow ? 'block' : 'none',
      }}
    >
      {mousePositions
        .filter((item) => item.type === type)
        .map((mousePosition, index) => {
          return (
            <div
              key={index}
              className="line"
              style={{
                [type == 'vertical' ? 'top' : 'left']: `${type == 'vertical' ? mousePosition.y : mousePosition.x}px`,
              }}
            >
              <div className="action" style={{ [type == 'vertical' ? 'left' : 'top']: 20 }}>
                <span className="del"></span>
                <span className="value">{mousePosition.value}</span>
              </div>
            </div>
          );
        })}
    </div>
  );
};

export default RulerReferenceLine;
